<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户注册|飞猪网</title>

    <jsp:include page="../common/common.jsp" />
    <link rel="stylesheet" href="/css/reg.css">
    <script>
        /**
         * 异步检测电话号码是否已经注册
         */
        function check_tel() {
            let tel = $("input[name='tel']").val().trim();
            $.ajax({
                method:"GET",
                url:"/reg/tel/" + tel,
                success:function (data) {
                    if (data.data == tel) {
                        $("#tel_tips").show()
                    } else {
                        $("#tel_tips_r").show()
                    }
                }
            })
        }

        function check_email() {
            let email = $("input[name='email']").val().trim();
            $.ajax({
                method:"GET",
                url:"/reg/email?email=" + email,
                success:function (data) {
                    if (data.data == email) {
                        $("#email_tips").show()
                    } else {
                        $("#email_tips_r").show()
                    }
                }
            })
        }

        /**
         * 给 tel input绑定一个失去焦点事件
         */
        $().ready(function () {
            $("input[name='tel']").blur(function () {
                check_tel()
            })

            $("input[name='email']").blur(function () {
                check_email()
            })
        })
    </script>
</head>
<body>
<jsp:include page="../common/ceiling.jsp" />
<header>
    <h1>
        <span class="logo">飞猪</span>
        <span class="title">用户注册</span>
    </h1>
</header>
<nav>
    <ul class="clearfix">
        <li class="active"><span class="step active-step">1</span>设置用户名</li>
        <li><span class="step">2</span>填写账号信息</li>
        <li><span class="step">3</span>注册成功</li>
    </ul>
</nav>
<article class="content">
    <!--url :fill_mobile-->
    <form method="post" action="#">
        <div class="row clearfix">
            <div class="col-r">手机号</div>
            <div class="col-l"><input type="text" name="tel"></div>
            <div class="hidden_" id="tel_tips">手机号已存在</div>
            <div class="hidden_" id="tel_tips_r"><span>√</span></div>
        </div>
        <div class="row clearfix">
            <div class="col-r">邮箱</div>
            <div class="col-l"><input type="email" name="email"></div>
            <div class="hidden_" id="email_tips">邮箱格式不正确</div>
            <div class="hidden_" id="email_tips_r"><span>√</span></div>
        </div>
        <div class="row btns">
            <button type="submit" class="btn">下一步</button>
        </div>
    </form>
</article>
</body>
</html>